<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02-折线图制作</title>
    <!-- 1.引入刚刚下载的 ECharts 文件 -->
    <script src="./echarts/echarts.min.js"></script>
</head>

<body>
    <!-- 2.为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script>
        //3.创建echarts 实例并渲染
        // 3.1 基于准备好的dom，初始化echarts实例
        const myChart = echarts.init(document.querySelector('#main'));

        // 3.2指定图表的配置项和数据(设置图标样式)
        const option = {
        //鼠标移入提示
        tooltip: {
    trigger: 'axis',
    position: function (pt) {
      return [pt[0], '10%'];
    }
  },
        //标题
        title: {
    left: '20',
    text: '2021全学科薪资走势'
  },
        //x轴
        xAxis: {
    type: 'category',//类别
    boundaryGap: false,
    data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
  },
        //y轴
        yAxis: {
    type: 'value',
    boundaryGap: [0, '50%']
  },
        //线条样式
        series: [
    {
      name: '薪资走势',
      //设置折线图的形式(平滑)
      smooth: true,
      type: 'line',
      //小圆点
      //symbol: 'none',
      symbolSize: 6,
      itemStyle: {
        color: 'rgb(78, 146, 239)'
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(154, 195, 245)'
          },
          {
            offset: 1,
            color: 'rgb(255, 255, 255)'
          }
        ])
      },
      data: [654,602,407,432,399,432,543,409,342,544,575,695]
    }
  ]
      }

        // 3.3使用刚指定的配置项和数据显示图表。(渲染图表样式)
        myChart.setOption(option);
    </script>
</body>

</html>